{{ header }}

<div id="account-login" style="background-image:url({{ login_background_image }})">
    <div class="container">
        {{ include(helper.template('_partial/breadcrumb')) }}
        <div class="row no-gutters">
            <div id="content" class="col-sm-12">{{ content_top }}
                {% if false %}
                    <div class="col-sm-6">
                        <div class="well">
                            <h2>{{ text_new_customer }}</h2>
                            <p><strong>{{ text_register }}</strong></p>
                            <p>{{ text_register_account }}</p>
                            <a href="{{ register }}" class="btn btn-primary">{{ button_continue }}</a>
                        </div>
                    </div>
                {% endif %}
                <div class="well login-wrapper">
                    {% if not is_binding %}
                        <div class="icon-container" data-login="pc" data-toggle="tooltip" title="{{ scan_login }}">
                            <i class="login-icon scan"></i>
                        </div>
                    {% endif %}


                    {% if success %}
                        <div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }}</div>
                    {% endif %}
                    {% if error_warning %}
                        <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}</div>
                    {% endif %}

                    {#扫码登录的区域#}
                    <div class="scan-login-container text-center hidden">
                        <h2>{{ text_login_scan }}</h2>

                        <div class="qrcode-image">
                            <img src="" alt="{{ scan_login }}">
                            <div class="loop-tips hidden"></div>
                        </div>
                        <p>{{ scan_tip }}</p>
                    </div>

                    <div class="pc-login-container login-form">
                        <ul class="nav nav-tabs">
                            <li id="tab-mobile" class="{{ login_type == 'mobile' ? "active": '' }}" >
                                <a href="#pane-mobile" data-toggle="tab">{{ is_binding ? text_bind_phone_account: text_login_phone }}</a>
                            </li>
                            <li id="tab-email" class="{{ login_type != 'mobile' ? "active": '' }}">
                                <a href="#pane-email" data-toggle="tab">{{ is_binding ? text_bind_mail_account: text_login_mail }}</a>
                            </li>
                        </ul>
                        <div class="tab-content mt-2">
                            {# 手机注册表单 #}
                            <div class="tab-pane {{ login_type == 'mobile' ? "active": '' }}" id="pane-mobile">

                                <form action="{{ action }}" method="post" enctype="multipart/form-data">
                                    {#<div class="form-group">#}
                                    {#<label class="control-label" for="input-email">{{ entry_email }}</label>#}
                                    {#<input type="text" name="email" value="{{ email }}" placeholder="{{ entry_email }}" id="input-email" class="form-control" />#}
                                    {#</div>#}
                                    <div class="form-group hidden">
                                        <input type="text" name="login_type" value="mobile" class="form-control"/>
                                    </div>

                                    <div class="form-group required telephone-wrapper">
                                        <div class="dial_code">
                                            {#<select name="dial_code" class="form-control">#}
                                                {#<option value="86">86</option>#}
                                            {#</select>#}
                                            <input name="dial_code" value="86" class="form-control">
                                        </div>
                                        <div class="dot telephone">
                                            <input type="tel" name="telephone"
                                                   value="{{ telephone }}"
                                                   placeholder="{{ entry_mobile }}"
                                                   id="mobile-telephone"
                                                   autocomplete='new-password'
                                                   class="form-control"/>
                                            <div class="text-danger "></div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label" for="input-password">{{ entry_password }}</label>
                                        <input autocomplete='new-password' type="password" name="password" value="{{ password }}" placeholder="{{ entry_password }}" class="form-control" />
                                    </div>

                                    <input type="submit" value="{{ button_login }}" class="btn btn-primary" />

                                    <div class="form-group register-box">
                                        <a class="pull-left" href="{{ forgotten }}">{{ text_forgotten }}</a>
                                        <a class="pull-right" href="{{ register }}">{{ text_new_customer }}</a>
                                    </div>



                                    {% if redirect %}
                                        <input type="hidden" name="redirect" value="{{ redirect }}" />
                                    {% endif %}
                                </form>

                            </div>

                            <div class="tab-pane {{ login_type != 'mobile' ? "active": '' }}" id="pane-email">
                                <form action="{{ action }}" method="post" enctype="multipart/form-data">

                                    <div class="form-group hidden">
                                        <input type="text" name="login_type" value="email" class="form-control"/>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label" for="input-email">{{ entry_email }}</label>
                                        <input autocomplete='new-password' type="text" name="email" value="{{ email }}" placeholder="{{ entry_email }}" id="input-email" class="form-control" />
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="input-password">{{ entry_password }}</label>
                                        <input autocomplete='new-password' type="password" name="password" value="{{ password }}" placeholder="{{ entry_password }}" id="input-password" class="form-control" />
                                    </div>

                                    <input type="submit" value="{{ button_login }}" class="btn btn-primary" />

                                    <div class="form-group register-box">
                                        <a class="pull-left" href="{{ forgotten }}">{{ text_forgotten }}</a>
                                        <a class="pull-right" href="{{ register }}">{{ text_new_customer }}</a>
                                    </div>



                                    {% if redirect %}
                                        <input type="hidden" name="redirect" value="{{ redirect }}" />
                                    {% endif %}
                                </form>
                            </div>

                        </div>

                        <div class="oauth-login">
                            {%  if not is_binding %}
                                {% for oauth_login_action in oauth_login_actions %}
                                    <a class="{{  oauth_login_action.type }}" href="{{  oauth_login_action.action }}" title="{{ oauth_login_action.title }}">
                                        <img src="{{ oauth_login_action.icon }}" alt="">
                                    </a>
                                {% endfor %}
                            {% endif %}
                        </div>

                    </div>


                </div>
                {{ content_bottom }}
            </div>
        </div>
    </div>
</div>

{{ include(helper.template('account/common_style')) }}

{{ footer }}


<script>

    var df = {{ oauth_login_actions | json_encode }};

    $(function(){

        {#var origin_title = '{{ is_binding ? text_bind_account: text_returning_customer }}';#}

        var interval; // 用于存储循环setInterval的id

        var token;	// 生成扫码登录时的token

        var SCAN_SUCCESS_CODE = 20002;
        var NO_SCAN = 20001;
        var CODE_TIMEOUT = 20003;

        $('body').on('click','.icon-container',function(event){
            var login_type = this.dataset.login;
            var self = this;

            switch (login_type){
                case 'pc':
                    fetchQrcode(function () {
                        self.dataset.login = 'scan';
                        self.dataset.originalTitle = '{{ password_login }}';
                        $('.login-icon').removeClass('scan');
                        $('.pc-login-container').addClass('hidden');
                    });

                    break;
                case 'scan':

                    clearInterval(interval);

                    this.dataset.login = 'pc';

                    // $('.login-wrapper > h2').text(origin_title);

                    this.dataset.originalTitle = '{{ scan_login }}';
                    $('.login-icon').removeClass('pc');

                    $('.scan-login-container').addClass('hidden');
                    $('.login-wrapper > .login-form').removeClass('hidden');

                    break;
            }

            $('.login-icon').addClass(login_type);
        });

        /**
         * 获取扫码登录的二维码
         * */
        function fetchQrcode(cb) {
            cb = cb || $.noop;
            $.ajax('/?route=account/login/generateQrCode')
                .success(function(res){
                    $('.scan-login-container').removeClass('hidden');
                    $('.qrcode-image > img').attr('src',res.qr_code);

                    $('.login-wrapper > h2').text('{{ scan_login }}');

                    token = res.qr_code_token;

                    $('.loop-tips').addClass('hidden');
                    cb.call();

                    interval = setInterval(loop,2000);
                })
                .error(function(err){
                    alert(err);
                })
        }

        /**
         * polling请求成功的回调处理
         * @param res ajax返回的数据对象
         * */
        function successCallback(res){
            switch( parseInt(res.code) ){
                case NO_SCAN:
                    break;
                default: {
                    var tip_str;
                    if( parseInt(res.code) === SCAN_SUCCESS_CODE ){
                        tip_str = "<p class='success-text'><i class='icon-success'></i>" + res.msg + "...<span>3s</span>" + "</p>";
                        var seconds = 3;
                        var second_interval = setInterval(function(){
                            if( seconds === 0 ) {
                                clearInterval(second_interval);
                                window.location.href = res.redirect || window.location.origin;
                                return;
                            }
                            seconds--;
                            $('.success-text span').text(seconds + 's');
                        },1000);
                    }else if( parseInt(res.code) === CODE_TIMEOUT ) {
                        tip_str = "<p>" + res.msg + "</p><button class='text-center'>{{ refresh }}</button>";
                    }

                    $('.loop-tips').html(tip_str);
                    $('.loop-tips').removeClass('hidden');

                    $('body').on('click','.loop-tips > button',fetchQrcode);

                    clearInterval(interval);
                }
                    break;
            }
        }

        /**
         * 循环请求
         * */
        function loop() {
            $.ajax({
                url: '/?route=account/login/polling',
                type: 'GET',
                dataType: 'json',
                data: {'qr_code_token': token},
                cache: false,
                beforeSend: function(){},
                success: successCallback,
                complete: function() {},
                error: function(error){
                    alert(error);
                }
            })
        }
    });

</script>

<link href="catalog/view/javascript/dial-code.css" rel="stylesheet">
<script type="text/javascript" src="catalog/view/javascript/initialize-dial-code.js"></script>
<script>
    /**
     * 初始化选择
     * @type {boolean}
     */
    var isChinese = /^zh/.test("{{ code }}");
    $('input[name="dial_code"]').dialCode({
        isChinese: isChinese,
    })
</script>

<!--
http://dw.me/index.php?route=account/register&oauth_type=alipay_pc&oauth_user_id=11
--/>